<template>
  <PageMain title="详情" is-back>
    <div class="form-content f-c j-b">
      <div class="form-box">
        <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" disabled>
          <el-form-item label="用户昵称" prop="realname">
            <el-input clearable v-model="formData.realname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input clearable type="password" v-model="formData.password"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input clearable v-model="formData.mobile"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-switch v-model="formData.status" :active-value="0" :inactive-value="1"></el-switch>
          </el-form-item>
        </el-form>
        <div class="gap"></div>
        <el-form label-position="top">
          <el-form-item label="头像">
            <el-image :src="formData.imageUrl" class="avatar" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </PageMain>
</template>
<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { http } from "@/api";

const router = useRouter()
const route = useRoute()
const id = route.params.id
const formData = ref({

})
const rules = ref({

})
const formRef =  ref(null)
if (id) {
  // 获取详情
  http.user.read({
    id
  }).then(res => {
    formData.value = res.data
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (id) {
        // 编辑
        http.user.update({
          ...formData.value,
          id
        }).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('编辑成功')
            router.back()
          }
        })
      } else {
        // 新增
        http.user.create(formData.value).then(res => {
          console.log(res)
          if (res.code === 0) {
            ElMessage.success('新增成功')
            router.back()
          }
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>
<style lang="scss">
.form-box {
  display: flex;
  .gap {
    width: 32px;
  }

  .avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
  }
}
</style>